<template>
  <div class="charts">
    
    <!-- 定义宽高的 DOM 容器，用于显示柱形图 -->
    <div ref="barChart" style="width: 600px;height:400px;"></div>

    <!-- 饼图容器 -->
    <div ref="pieChart" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

// 引用页面渲染后的 DOM 元素
const barChart = ref<HTMLDivElement>()

// 挂载后，创建 EChart 实例
onMounted(() => {
  // 初始化 echarts 实例
  const myChart = echarts.init(barChart.value)
  // 配置数据
  myChart.setOption({
    title: { // 标题
      text: 'ECharts 入门示例', // 主标题文本
      textStyle: { // 主标题样式
        color: '#f00', // 主标题颜色
      },
    },
    tooltip: {}, // 提示框
    xAxis: { // x 轴
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {}, // y 轴
    legend: {
      data: ['销量', '折扣']
    }, // 图例
    series: [ // 系列
      { // 系列配置
        name: '销量', // 系列名称
        type: 'bar', // 系列类型
        data: [5, 20, 36, 10, 10, 20] // 系列数据
      },
      { // 系列配置
        name: '折扣', // 系列名称
        type: 'line', // 系列类型
        data: [10, 9, 5, 10, 8, 7] // 系列数据
      },
    ]
  })
})

// 模拟网络请求，查询出当月消费数据后，绘制饼图
const pieChart = ref<HTMLDivElement>()
const drawPieChart = async () => {
  setTimeout(() => {
    // 模拟服务端返回的数据
    const data = [
      { cost: 700, title: '生活费' },
      { cost: 480, title: '交通费' },
      { cost: 320, title: '通信费' },
      { cost: 500, title: '培训费' },
      { cost: 998, title: '其它' },
    ]

    // 初始化 echarts 实例
    const pieChartIns = echarts.init(pieChart.value)
    // 配置
    pieChartIns.setOption({
      title: {
        text: '饼图示例'
      },
      legend: {
        top: 'bottom'
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [20, 200],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: data.map(item => ({
            name: item.title,
            value: item.cost,
          })),
        }
      ]
    })
  }, 2000)
}
drawPieChart()
</script>

<style lang="scss" scoped>

</style>
